<template>
   
  <table class="table-bordered" border="1">
    <thead>
      <tr>
        <td>
          <input type="checkbox" v-model="allcheck" @change="RNallcheck" />
        </td>
        <td>房号ID</td>
        <td>房号名称</td>
        <td>所属楼层</td>
        <td>具体房号</td>
        <td>房号状态</td>
        <td>删除标志位</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in RN">
        <td>
          <input
            type="checkbox" :checked="ischeck" @change="GetRevercheck"
            v-model="arrcheck"  :value="item.rnumber_Id"
          />
        </td>
        <td>{{ item.rnumber_Id }}</td>
        <td>{{ item.rnumber_Name }}</td>
        <td>{{ item.rnumber_Floor }}</td>
        <td>{{ item.rnumber_Num }}</td>
        <td>{{ item.rnumber_State ? "上架" : "下架" }}</td>
        <td>{{ item.rname_DelState ? "已删" : "未删" }}</td>
        <td>
          <a
            href="#"
            @click="DeleteState(item.rnumber_Id)"
            style="width: 50px; height: 50px"
            >逻辑删除</a
          >
          <a
            href="#"
            @click="RoomNumberState(item.rnumber_Id)"
            style="width: 50px; height: 50px"
            >状态修改</a
          >
            <a
            href="#"
            @click="UpRoomNumber(item.rnumber_Id)"
            style="width: 50px; height: 50px"
            >修改</a
          >
        </td>
      </tr>
    </tbody>
  </table>
  <span>
    共{{ page.totalCount }}条数据,当前为第{{ page.pageIndex }}/{{
      page.pagelCount
    }}页，共{{ page.pagelCount }}页
    <a href="#" @click="Getpage('首页')" style="width: 50px; height: 50px"
      >首页</a
    >
    <a href="#" @click="Getpage('上一页')" style="width: 50px; height: 50px"
      >上一页</a
    >
    <a href="#" @click="Getpage('下一页')" style="width: 50px; height: 50px"
      >下一页</a
    >
    <a href="#" @click="Getpage('尾页')" style="width: 50px; height: 50px"
      >尾页</a
    >

    <select v-model="Pindex" @change="Getpageindex">
      <option :value="1">每页1条</option>
      <option :value="2">每页2条</option>
      <option :value="3">每页3条</option>
    </select>

    <input type="button" value="导入" @click="GetExelRoomNumber">
    <input type="button" value="批删" @click="DelExelRoomNumber">
  </span>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const RN: any = ref([
  {
    rnumber_Id: 0,
    rnumber_Name: "",
    rnumber_Floor: 0,
    rnumber_Num: "",
    rnumber_State: true,
    rname_DelState: true,
  },
]);

// 分页数据
const page = ref({
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pagelCount: 0,
});

//翻转数据
const Pindex = ref(2);

const Getpageindex = () => {
  page.value.pageSize = Pindex.value;
  ShowRoomNumber();
};
// 查询数据
const rnname = ref("");
onMounted(() => {
  ShowRoomNumber();
});

//显示
const ShowRoomNumber = () => {
  axios
    .get("https://localhost:7071/api/RoomNumber/ShowRoomNumber", {
      params: {
        RNname: rnname,
        pageIndex: page.value.pageIndex,
        pageSize: page.value.pageSize,
      },
    })
    .then((res) => {
      console.log(res.data);
      RN.value = res.data.pageDate;
      page.value.totalCount = res.data.totalCount;
      page.value.pagelCount = res.data.pagelCount;
    });
};

// 逻辑删除
const DeleteState = (rnid: number) => {
  axios
    .get("https://localhost:7071/api/RoomNumber/DelStateRoomNumber", {
      params: {
        RnId: rnid,
      },
    })
    .then((res) => {
      if (res.data > 0) {
        alert("逻辑删除修改成功");
        ShowRoomNumber();
      } else {
        alert("逻辑删除修改失败");
      }
    });
};

//状态修改
const RoomNumberState = (rnid: number) => {
  axios
    .get("https://localhost:7071/api/RoomNumber/RoomNumberState", {
      params: {
        RnId: rnid,
      },
    })
    .then((res) => {
      if (res.data > 0) {
        alert("状态修改成功");
        ShowRoomNumber();
      } else {
        alert("状态修改失败");
      }
    });
};

// 分页
const Getpage = (ch: any) => {
  switch (ch) {
    case "首页":
      page.value.pageIndex = 1;
      break;
    case "上一页":
      if (page.value.pageIndex > 1) {
        page.value.pageIndex--;
      }
      break;
    case "下一页":
      if (page.value.pageIndex < page.value.pagelCount) {
        page.value.pageIndex++;
      }
      break;
    case "尾页":
      page.value.pageIndex = page.value.pagelCount;
      break;
  }
  ShowRoomNumber();
};

// 全选
const allcheck = ref(false);

// 选中状态
const ischeck = ref(false);

const arrcheck = ref([]);

// 实现全选
const RNallcheck = () => {
  if (allcheck.value) {
    ischeck.value = true;
    arrcheck.value = RN.value.map((item: any) => {
      return item.rnumber_Id;
    });

    // alert( arrcheck.value)
  } else {
    ischeck.value = false;
    arrcheck.value = [];
  }
};

// 反选
const GetRevercheck = () => {
    if (arrcheck.value.length == RN.value.length) {
        allcheck.value = true;
        alert( allcheck.value)
    }
   
    else {
         allcheck.value = false;
    }
     
}

// 跳转修改页面
const UpRoomNumber = (rnid:number) => {
    router.push({
        name: 'UpRoomNumberView',
        params: {
            id:rnid
        }
    })
}

// 导入
const GetExelRoomNumber = () => {
    axios.get('https://localhost:7071/api/RoomNumber/ExeclRoomNumber', {
        params: {
            PathName:"D:\\专高二\\RoomNumber.xlsx"
        }
    })
        .then(res => {
            if (res.data == 1) {
            alert('导入成功')
            }
            else {
 alert('导入失败')
        }
    })
}

// 批删
const DelExelRoomNumber = () => {
    axios.get('https://localhost:7071/api/RoomNumber/DeleteSataRoomNumber', {
        params: {
            Idstring: arrcheck.value.toString()
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert('批量删除成功');
                ShowRoomNumber();
            }
            else {
              alert('批量删除失败')
        }
    })
}

</script>

<style scoped>
</style>